<template>
	<el-row>
		<el-col :span="24">
			<el-row>
				<el-col :offset="3" :span="6" class="logo">
					<img src="../../assets/home/logo-bai.png">
				</el-col>
				<el-col :span="12" :offset="2" class="name">
					<el-row>
						<el-col :span="24" class="titleName">
							中华粮网
						</el-col>
						<el-col :span="24" class="titleHref">
							www.cngrain.com
						</el-col>
					</el-row>
				</el-col>
			</el-row>
		</el-col>
		<el-col :span="20" :offset="2" class="search_input">
			<el-input placeholder="关键词搜索" v-model="input">
				<i slot="suffix" class="el-input__icon el-icon-search" @click="getProgramList()"></i>
			</el-input>
		</el-col>
		<el-col :span="24" class="navSelect">
			<el-row>
				<el-col :span="12" class="positor">
					<div :class="se_active == 1 ? 'se_active' : ''" @click="switchType(1)">品种</div>
				</el-col>
				<el-col :span="12" class="positor">
					<div :class="se_active == 0 ? 'se_active' : ''" @click="switchType(0)">栏目</div>
				</el-col>
			</el-row>
		</el-col>
		<el-col :span="24">
			<menutree ref="menutree"></menutree>
		</el-col>
	</el-row>
</template>

<script>
	import menutree from '@/view/compents/menutree.vue'
	export default {
		name: 'navTabs',
		components: {
			menutree
		},
		props: {
			/*
				nav_list
				index:'表示当前是在第几个级别'
				title:'表示当前显示的名字'
				icon: '名字前显示的标签'
				children: '当前标签的子标签'
			*/
     // nav_list: {
     // 				type: Array,
     // 				default: () => {
     // 					return [{
     // 							index: 1,
     // 							title: '均价',
     // 							icon: 'el-icon-location',
     // 							router: '',
     // 							children: [{
     // 								index: '1-1',
     // 								icon: 'el-icon-help',
     // 								title: '商品房均价',
     // 								router: '/chart?type=0',
     // 								children: [{
     // 									index: '1-1-1',
     // 									icon: 'el-icon-help',
     // 									title: '商品房均价',
     // 									router: '/chart?type=0',
     // 									children: []
     // 								}]
     // 							}, {
     // 								index: '1-2',
     // 								icon: 'el-icon-view',
     // 								title: '住宅均价',
     // 								router: '/home?type=1',
     // 								children: []
     // 							}]
     // 						},
     // 						{
     // 							index: 2,
     // 							title: '公司排名',
     // 							icon: 'el-icon-folder',
     // 							router: '/chart?type=1',
     // 							children: []
     // 						},
     // 						{
     // 							index: 3,
     // 							title: '市值排名',
     // 							icon: 'el-icon-monitor',
     // 							router: '/chart?type=2',
     // 							children: []
     // 						}
     // 					]
     // 				}
     // 			}
		},
		data() {
			return {
				input: '',
				se_active: 1,
        data:null,
				url: {
					getProgramList: "/web/program/getProgramList",
				},
			}
		},
		created() {
			this.getProgramList()
		},
		methods: {
			switchType(type) {
				this.se_active = type
				this.getProgramList()
			},
			async getProgramList() {
        sessionStorage.removeItem('index')
        sessionStorage.removeItem('kindId')
        sessionStorage.removeItem('programId')
        sessionStorage.setItem("type",this.se_active)
        let params = {
        	type: this.se_active,
        }
        if(this.input && this.input.length > 0){
          params.name = this.input
        }
				let res = await this.$http.get(this.url.getProgramList,params );
				this.data =  res.data.result
        this.$refs.menutree.load(this.data)

			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.positor {
		cursor: pointer;
	}

	.navSelect {
		text-align: center;
		color: #ffffff;
		height: 5vh;
		line-height: 5vh;
		font-size: 19px;

		.se_active {
			background-color: #324980;
		}
	}

	.logo {
		text-align: center;

		img {
			height: 6vh;
			margin-top: 3vh;
		}
	}

	.name {
		height: 7vh;
		margin-top: 4vh;
		color: #ffffff;

		.titleName {
			font-size: 125%;
			font-weight: bold;
			height: 2.5vh;
			line-height: 2.5vh;
			letter-spacing: 7px;
		}

		.titleHref {
			font-size: 70%;
			font-weight: bold;
			height: 3vh;
			line-height: 3vh;
		}
	}

	.search_input {
		padding: 1vh 0 2vh 0;

		.el-input__inner {
			background-color: #0f1b35 !important;
			border-color: #0f1b35;
			height: 4vh !important;
			line-height: 4vh;
			font-size: 15px;
			color: #ffffff;
		}
	}
</style>
